import React, { useState } from 'react';
import { Form, Input, Button, Space, Checkbox, Divider, Card } from 'antd';
import { UserGroup } from '../../api/userGroup';
import './UserGroupForm.scss';

// 系统权限列表
const systemPermissions = [
    { label: '用户查看', value: 'user:view' },
    { label: '用户创建', value: 'user:create' },
    { label: '用户编辑', value: 'user:edit' },
    { label: '用户删除', value: 'user:delete' },
    { label: '角色管理', value: 'role:manage' },
    { label: '系统设置', value: 'system:setting' },
    { label: '数据导出', value: 'data:export' },
    { label: '数据导入', value: 'data:import' },
    { label: '日志查看', value: 'log:view' },
    { label: '文件上传', value: 'file:upload' },
    { label: '报表查看', value: 'report:view' },
    { label: '报表导出', value: 'report:export' }
];

// 权限分类
const permissionCategories = [
    {
        name: '用户权限',
        permissions: ['user:view', 'user:create', 'user:edit', 'user:delete', 'role:manage']
    },
    {
        name: '系统权限',
        permissions: ['system:setting', 'log:view']
    },
    {
        name: '数据权限',
        permissions: ['data:export', 'data:import', 'file:upload']
    },
    {
        name: '报表权限',
        permissions: ['report:view', 'report:export']
    }
];

interface UserGroupFormProps {
    initialValues?: UserGroup;
    onFinish: (values: any) => void;
    onCancel: () => void;
}

const UserGroupForm: React.FC<UserGroupFormProps> = ({
    initialValues,
    onFinish,
    onCancel
}) => {
    const [form] = Form.useForm();
    const [loading, setLoading] = useState(false);

    // 表单提交
    const handleFinish = async (values: any) => {
        setLoading(true);
        try {
            await onFinish(values);
        } finally {
            setLoading(false);
        }
    };

    // 快速选择所有权限
    const handleSelectAll = () => {
        const allPermissions = systemPermissions.map(p => p.value);
        form.setFieldsValue({ permissions: allPermissions });
    };

    // 快速取消选择所有权限
    const handleSelectNone = () => {
        form.setFieldsValue({ permissions: [] });
    };

    // 按分类选择权限
    const handleSelectCategory = (category: string[]) => {
        const currentPermissions = form.getFieldValue('permissions') || [];
        const newPermissions = [...new Set([...currentPermissions, ...category])];
        form.setFieldsValue({ permissions: newPermissions });
    };

    // 获取权限选择框选项
    const getPermissionCheckboxes = (category: { name: string; permissions: string[] }) => {
        const categoryPermissions = systemPermissions.filter(p =>
            category.permissions.includes(p.value)
        );

        return (
            <Card
                size="small"
                title={category.name}
                className="permission-card"
                extra={
                    <Button
                        type="link"
                        size="small"
                        onClick={() => handleSelectCategory(category.permissions)}
                    >
                        全选
                    </Button>
                }
            >
                <Checkbox.Group
                    className="permission-group"
                    options={categoryPermissions}
                />
            </Card>
        );
    };

    return (
        <Form
            form={form}
            layout="vertical"
            initialValues={initialValues || { name: '', description: '', permissions: [] }}
            onFinish={handleFinish}
            className="modal-form"
        >
            <Form.Item
                name="name"
                label="用户组名称"
                rules={[
                    { required: true, message: '请输入用户组名称' },
                    { max: 50, message: '用户组名称不能超过50个字符' }
                ]}
            >
                <Input placeholder="请输入用户组名称" />
            </Form.Item>

            <Form.Item
                name="description"
                label="描述"
                rules={[
                    { max: 200, message: '描述不能超过200个字符' }
                ]}
            >
                <Input.TextArea
                    placeholder="请输入用户组描述"
                    rows={3}
                    showCount
                    maxLength={200}
                />
            </Form.Item>

            <Divider orientation="left">权限设置</Divider>

            <div className="permission-actions">
                <Space>
                    <Button size="small" onClick={handleSelectAll}>选择全部</Button>
                    <Button size="small" onClick={handleSelectNone}>清除选择</Button>
                </Space>
            </div>

            <Form.Item
                name="permissions"
                rules={[
                    { required: true, message: '请至少选择一个权限' }
                ]}
            >
                <div className="permission-categories">
                    {permissionCategories.map((category, index) => (
                        <div key={index} className="permission-category">
                            {getPermissionCheckboxes(category)}
                        </div>
                    ))}
                </div>
            </Form.Item>

            <Form.Item className="form-actions">
                <Space>
                    <Button onClick={onCancel}>取消</Button>
                    <Button type="primary" htmlType="submit" loading={loading}>
                        {initialValues ? '更新' : '创建'}
                    </Button>
                </Space>
            </Form.Item>
        </Form>
    );
};

export default UserGroupForm; 